<template>
  <div class="app">
   <el-row :gutter="12" class="userInfo">
      <el-col :span="4">
         <el-card shadow="always" body-style="height:350px">
            <div class="aside">
             <el-menu active-text-color="#ffd04b">  
               <el-menu-item index="1">
                  <a href="#/user/profile" class="tag">我的资料</a>
               </el-menu-item>
               <el-menu-item index="2">
                  <a href="#/user/blog" class="tag">我的博客</a>
               </el-menu-item>
               <el-menu-item index="3">
                  <a href="#/user/follow" class="tag">我的关注</a>
               </el-menu-item>
               <el-menu-item index="4">
                  <a href="#/user/fans" class="tag">我的粉丝</a>
               </el-menu-item>
               <el-menu-item index="5">
                  <a href="#/user/chatroom" class="tag">在线聊天室</a>
               </el-menu-item>
             </el-menu>
            </div>
         </el-card>
      </el-col>
      <el-col :span="16">
         <el-card shadow="always" body-style="height:500px;">
            <center><h2>用户关注信息</h2></center>
             <div class="main">
                <div v-for="i in usermsg" class="list">
                   <div class="narvar">
                      <div class="u">
                         <div class="icon">
                           <el-avatar  :size="70" :src="i.IconUrl" @error="errorHandler">
                                       <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
                           </el-avatar>
                           <span class="username">{{i.UserName}}</span>
                           <span class="introduce">{{i.Introduction}}</span>
                           <span class="el-icon-s-comment email">{{i.Email}}</span>
                        </div>
                      </div>
                      <el-button type="text" class="stop" @click="stop(i.Uuid)">取消关注</el-button>
                   </div>
                </div>
             </div>
         </el-card>    
      </el-col>
   </el-row>
  </div>
</template>

<script>
import {apiurl} from "../../service/api.js";
import usernavbar from '../../assets/navbar.png'

export default {
   created(){
      this.send()
   },
   data(){
      return{
         usermsg : [],
      }
   },methods:{
      send(){
         var that = this
         that.$axios.get({
            url : apiurl.followed
         }).then(res=>{
            if(res.data.code == 200){
               for(var i=0;i<res.data.data.length;i++){
                  that.usermsg.push(res.data.data[i])
               }
            }else{
               alert("获取用户数据失败,请重新登录")
            }
         })
      },
      stop(id){
         var that = this
         var psd = {
            uuid : id.toString()
         }
         that.$axios.post({
            url:apiurl.unfollowed,
            data : psd
         }).then(res=>{
            if(res.data.code==200){
                that.$message.success(`已取消关注`)
               that.usermsg.splice(0,that.usermsg.length)
               that.send()
            }
         })
      }
   } 
}
</script>



<style  scoped>
.app{
   position: relative;
   margin-top: 20px;
}
/*渐入动画*/
.userInfo
{
    padding-left : 15%;
    padding-top: 2%;
	position:relative;
	animation:mymove 1s forwards;
}

@keyframes mymove
{
	from {left:-1000px;}
	to {left:0px;}
}

.aside{
   height: 330px;
   /* width: 80%; */
}
.tag{
   height: 66px;
   font-size: 20px;
   color:rgb(0, 162, 255);
   text-decoration:none;
}
.main{
   overflow: scroll;
   overflow-x:hidden;
   height: 400px;
   width: 100%;
}
.narvar{
   position: relative;
   width: 100%;
   height: 80px;
   background: rgba(247, 243, 243, 0.972);
   border-bottom: 1px solid #b3afaff3 
}
.u{
   position: relative;
   width: 100%;
   height: 50px;
}
.icon{
   position: relative;
   margin-left: 30px;
   padding-top: 5px;
}
.username{
   font-weight: bold;
   font-family:initial;
   color :maroon;
   position: relative;
   margin-left: 10px;
   font-size: 20px;
}
.other{
   position: relative;
   width: 50%;
   margin-left: 180px;
}
.introduce{
   position: relative;
   font-size: 10px;
   margin-left: 50px;
   color: rgba(59, 57, 55, 0.849)
}
.email{
   position: relative;
   margin-left: 250px;
}
.stop{
   color:rgba(252, 78, 78, 0.925);
   position: relative;
   margin-left: 730px;
   font-weight: bold;
}

</style>